<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<view v-if="isCanUse">
			<view>
				<view class='header'>
					<view class="wx-wall">
						<text class="cuIcon-weixin"></text>
					</view>
				</view>
				<view class='content'>
					<view>申请获取以下权限</view>
					<text>获得你的公开信息(昵称，头像、地区等)</text>
				</view>

				<button class='bottom' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">
					授权登录
				</button>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				m:{},
				SessionKey: '',
				OpenId: '',
				nickName: null,
				avatarUrl: null,
				isCanUse: uni.getStorageSync('isCanUse') || true //默认为true
			};
		},
		methods: {
			...mapMutations(['login']),
			//第一授权获取用户信息===》按钮触发
			wxGetUserInfo() {
				let _this = this;
				uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						//console.log(infoRes);
						_this.m.nickName=infoRes.userInfo.nickName;
						_this.m.headPic=infoRes.userInfo.avatarUrl;
						try {
							uni.setStorageSync('isCanUse', false); //记录是否第一次授权  false:表示不是第一次授权
							_this.updateUserInfo();
						} catch (e) {}
					},
					fail(res) {}
				});
			},

			//登录
			wxapplogin() {
				let _this = this;
				uni.showLoading({
					title: '登录中...'
				});

				// 1.wx获取登录用户code
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						let code = loginRes.code;
						if (!_this.isCanUse) {
							//非第一次授权获取用户信息
							uni.getUserInfo({
								provider: 'weixin',
								success: function(infoRes) {
									_this.m.nickName=infoRes.userInfo.nickName;
									_this.m.headPic=infoRes.userInfo.avatarUrl;
									_this.updateUserInfo(); 
								}
							});
						}
						//2.将用户登录code传递到后台置换用户SessionKey、OpenId等信息
						_this.$api.ajax('user/openid',{parm:code},function(res){
							uni.hideLoading();
							var data = res[1].data;
							if (data.statusCode == 200) {
								_this.m.openId=data.data.openid;
								_this.m.sessionKey=data.data.session_key;
								//console.log(data.data);
							}else{
								_this.$api.msg(data.message);
							}
						})
					},
				});
			},
			//向后台更新信息
			updateUserInfo() {
				let _this = this;
				_this.$api.ajax('user/wxlogin',_this.m,function(res){
					uni.hideLoading();
					var data = res[1].data;
					if (data.statusCode == 200) {
						//console.log(data.data);
						_this.login(data.data);
						uni.hideLoading();
						_this.$api.msg('登录成功~','success');
						setTimeout(()=>{
							//uni.navigateBack();
							uni.switchTab({
								url: '/pages/index/index'
							});
						}, 800)
					}else{
						_this.$api.msg(data.message);
					}
				})
			}
		},
		onLoad() { //默认加载
			this.wxapplogin();
		}
	}
</script>

<style lang='scss'>
	.header {
		margin: 90rpx 0 90rpx 50rpx;
		border-bottom: 1px solid #ccc;
		text-align: center;
		width: 650rpx;
		height: 300rpx;
		line-height: 450rpx;
		.wx-wall{
			width:65px;
			height: 65px;
			display: inline-block;
			border-radius: 100px;
			text-align: center;
			line-height: 65px;
			font-size: 40px;
			background-color: #2C405A;
			color: #FFFFFF;
		}
	}

	.header image {
		width: 200rpx;
		height: 200rpx;
	}

	.content {
		margin-left: 50rpx;
		margin-bottom: 90rpx;
	}

	.content text {
		display: block;
		color: #9d9d9d;
		margin-top: 40rpx;
	}

	.bottom {
		border-radius: 80rpx;
		margin: 70rpx 50rpx;
		font-size: 35rpx;
	}
</style>
